// 公共组件
import React, {useState} from 'react';
import {Button, Form, Row, Col, Pagination} from 'antd';
import {LeftOutlined, DownOutlined} from '@ant-design/icons';

const TableBtn = (props) => {
    let {
        btns = [], color = '#0da8de', onClick = () => {
        }, record
    } = props;
    if (typeof btns === 'function') {
        btns = btns();
    }
    if (!Array.isArray(btns)) {
        throw Error('TableBtn组件的btns属性应为数组类型或函数返回数组类型');
    }
    return (
        <div style={{display: 'flex', justifyContent: 'space-around'}}>
            {
                btns.map(item => {
                    if (item.hidden) {
                        return false;
                    }
                    return (
                        <Button
                            disabled={item.disabled}
                            onClick={_ => onClick(item.id, record)}
                            style={{color: item.disabled ? "rgb(173 174 175)" : color}}
                            size='small'
                            type='link'
                            key={item.name}
                        >
                            {item.name}
                        </Button>
                    );
                })
            }
        </div>
    );
};

const Search = (props) => {
    const [form] = Form.useForm();
    let {
        colNum = 3, // 一行显示多少个搜索框
        searchData = [], // 搜索框
        otherBtns = [], // 可以添加搜索后面的按钮
        onSearch,
        onReset,
        span = 18,
    } = props;
    if (typeof searchData === 'function') {
        searchData = searchData();
    }
    if (!Array.isArray(searchData)) {
        throw new Error('Search组件的searchData属性应为数组或函数返回数组');
    }
    if (typeof otherBtns === 'function') {
        otherBtns = otherBtns();
    }
    if (!Array.isArray(otherBtns)) {
        throw new Error('Search组件的otherBtns属性应为数组或函数返回数组');
    }
    let distribution = 24 / colNum; // 根据colNum分配给Col组件
    // const [searchAll, setSearchAll] = useState(false);
    let overflow;
    let height;
    // if (!searchAll) { // 有多个搜索框时，可以下拉
    //     overflow = 'hidden';
    //     height = '40px';
    // } else {
    height = undefined;
    overflow = undefined;
    // }
    return (
        <Form form={form} onFinish={onSearch} autoComplete="off"> 
            <Row>
                <Col span={span} style={{height: height}}>
                    <Row>
                        {
                            searchData.map((item, index) => {
                                return (
                                    <Col span={item.span || distribution} key={item.name + index}>
                                        <Form.Item
                                            // className='search-component-item'
                                            name={item.key}
                                            labelCol={item.labelCol}
                                            label={item.name}
                                            style={{
                                                // margin: '2px 8px', 
                                                // boxSizing: 'border-box',
                                                marginLeft: 5
                                            }}
                                        >
                                            {item.component}
                                        </Form.Item>
                                    </Col>
                                );
                            })
                        }
                    </Row>
                </Col>
                {/*<Col span={1} className='flex-center'>*/}
                {/*    {*/}
                {/*        // searchData.length > colNum ? (*/}
                {/*            searchAll ? (*/}
                {/*                <DownOutlined*/}
                {/*                    onClick={_ => setSearchAll(!searchAll)}*/}
                {/*                />*/}
                {/*            ) : (*/}
                {/*                <LeftOutlined*/}
                {/*                    onClick={_ => setSearchAll(!searchAll)}*/}
                {/*                />*/}
                {/*            )*/}
                {/*        // ) : null*/}
                {/*    }*/}
                {/*</Col>*/}
                <Col offset={1} span={24 - span - 1}>
                    <Button
                        style={{marginRight: 5}}
                        type='primary'
                        htmlType="submit"
                    >
                        搜索
                    </Button>
                    <Button
                        style={{marginRight: 5}}
                        onClick={() => {
                            onReset();
                            form.resetFields();
                        }}
                    >
                        重置
                    </Button>
                    {
                        otherBtns.map((item, index) => {
                            return (
                                <Button
                                    onClick={item.onClick}
                                    style={{marginRight: 5}}
                                    key={item.name + index}
                                >{item.name}</Button>
                            );
                        })
                    }
                </Col>
            </Row>
        </Form>
    );
};

const defaultPagination = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultPageSize: 20,
    pageSize: 20,
    pageSizeOptions:[10,20,30,40,50,60],
    showTotal: (total, range) => {
        return `共 ${total} 条数据，第 ${range[0]}-${range[1]} 条数据`;
    },
};

const defaultPagination1 = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultPageSize: 30,
    pageSize: 30,
    pageSizeOptions:[10,20,30,40,50,60],
    showTotal: (total, range) => {
        return `共 ${total} 条数据，第 ${range[0]}-${range[1]} 条数据`;
    },
};

export {
    TableBtn,
    Search,
    defaultPagination,
    defaultPagination1
};